<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>已买到商品</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
</head>
<style type="text/css">
    body {
        font-size: 14px;
    }

    .aui-content-padded {
        margin: 0 10px;
        padding: 10px 0;
    }

    .addFriend.aui-border:after {
        border-color: #327afa;
    }

    .orderList {
        margin-bottom: 15px;
        height: inherit;
        overflow: hidden;

    }

    .proTitle {
        font-size: 14px;
        line-height: 17px;
        color: #8f8f94;
    }

    .proTitleP {
        margin: 8px 0 !important;
    }

    .proList.aui-list-view .aui-img-object {
        max-width: 70px;
        height: 70px;
        line-height: 70px;
    }

    .orderTitle {
        font-size: 14px;
        padding: 10px;
        background: #fff;
    }

    .proPrice {
        text-align: right;
        margin-top: 5px;
    }

    .proList.aui-list-view {
        margin: 0;
    }

    .aui-list-view:after {
        border: none;
    }

    .totalPrice {
        font-size: 18px;
    }

    .proFooter .aui-list-view-cell {
        text-align: right;
    }

    .proMoreHandle {
        overflow: inherit;
        height: 55px;
    }

    .proMoreHandle span {
        float: right;
        display: block;
        padding: 5px 8px;
        border-radius: 5px;
        margin-right: 8px;
    }

    .proMoreHandle span.active.aui-border:after {
        border-color: #327afa;
    }

    .proMoreHandle .aui-border:after {
        border-radius: 5px;
    }

    .more {
        position: relative;
        /*margin-right: 0 !important;*/
    }

    .more a {
        color: #000;
    }

    .moreList {
        /*left: -28px;*/
        background: #FFF;
        border-radius: 5px;

    }

    .moreList li {
        padding: 5px 8px;
        width: 100px;
        text-align: center;
    }

    .mui-popover {
        width: 100px;
    }

    .active{
        background: #327afa !important;
        color:#fff !important;
        overflow: hidden;
    }
</style>
<body>
<div class="contain orderLists">
    <!-- 等待买家付款 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司0</span>
            <span class="orderStatus zfBlue aui-pull-right">等待买家付款</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <!--<span class="proColor">藏青撒旦法萨芬</span>-->
                    <!--<span class="proSize">均码</span>-->
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
                <div class="aui-pull-right" style="width: calc(100% - 85px)">
                    <div class="aui-col-xs-12">

                        <span class="proColor aui-col-xs-6">是飞洒发</span>
                        <span class="proColor aui-col-xs-6">

                            ￥12
                            X2
                        </span>

                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border active">付款</span>
                    <span class="aui-border" data-type="cancel" tapmode onclick="deleOrder(this)">取消订单</span>
                    <span class="more" tapmode onclick="showHandle(this)" data-type="1">
                            <a>更多</a>
                       </span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 买家已付款 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">买家已付款</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border">提醒发货</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 卖家已发货 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">卖家已发货</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">1087.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border active">确认收货</span>
                    <span class="aui-border">查看物流</span>
                    <span class="more" tapmode onclick="showHandle(this)" data-type="2">
                            <a>更多</a>
                       </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">交易关闭</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>
                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border" data-type="delect" tapmode onclick="deleOrder(this)">删除订单</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 交易成功 -->
    <div class="orderList">
        <div class="orderTitle myBorder" tapmode onclick="openToTwo('orderInfo')">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">交易成功</span>
        </div>
        <ul class="aui-list-view proList">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border active">评价</span>
                    <span class="aui-border">查看物流</span>
                    <span class="more" tapmode onclick="showHandle(this)" data-type="3">
                            <a>更多</a>
                       </span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 交易关闭 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">交易关闭</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>
                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border" data-type="delect" tapmode onclick="deleOrder(this)">删除订单</span>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">

    apiready = function () {
        myAvatar = $api.getStorage('avatar');
        targetId = api.pageParam.targetId;
        targetAvatar = api.pageParam.targetAvatar;
        targetNickname = api.pageParam.targetNickname;
        api.parseTapmode();

        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/ptr_pull.png',
            bgColor: '#efeff4',
            textColor: '#959595',
            textDown: '下拉刷新',
            textUp: '松开刷新',
            showTime: true
        }, function (ret, err) {
            api.refreshHeaderLoadDone();
        });
    }

    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    function hidePopover() {
        mui('.mui-popover').popover('hide');
    }
    $(document).on("touchstart", "body", function () {
        mui('.mui-popover').popover('hide');
    })
    function showHandle(obj) {
        var type = $(obj).attr("data-type");
        var buttons;
        if (type == 1) {
            bottom = [""]
        }
        api.actionSheet({
            title: '请选择',
            cancelTitle: '取消',
            buttons: ['相册选取', '魅力自拍']
        }, function (ret, err) {
            if (ret.buttonIndex == 1) {

            } else if (ret.buttonIndex == 2) {

            }
        })
    }
    //删除订单
    function deleOrder(obj) {
        var title;
        if ($(obj).attr("data-type") == "cancel") {
            //取消订单
            title = "取消";
        } else {
            //删除订单
            //取消订单
            title = "删除";
        }
        api.actionSheet({
            title: "确定" + title + "订单？",
            destructiveTitle: title + "订单"
        }, function (ret, err) {
            if (ret.buttonIndex == 1) {

                $(obj).parents(".orderList").animate({"height": "0"}, 1000, function () {
                    $(obj).parents(".orderList").remove();
                    api.toast({
                        msg: "订单" + title + "成功！"
                    })
                });
            }
        })
    }
</script>
</html>